<template>
  <div class="category">
    <el-card class="box-card" shadow="never" style="border-radius: 10px">
      <div slot="header" class="clearfix">
        <span>标签</span>
      </div>
      <div
        v-for="item in form"
        :key="item.id"
        class="text item"
        @click="CateGo(item.id, item.name)"
      >
        <el-button type="primary" plain> {{ item.name }}</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        id: "",
        name: "",
      },
    };
  },
  methods: {
    CateGo(id1, name1) {
      console.log("v", id1, name1);
      if (this.$route.query.id !== id1 || this.$route.query.name !== name1) {
        this.$router
          .push({
            path: "/CateTextView",
            query: {
              id: id1,
              name: name1,
            },
          })
          .catch((err) => {
            if (err.name !== "NavigationDuplicated") {
              throw err;
            }
          });
      } else {
        // 如果已经是当前路由，可以在这里添加一些逻辑，比如刷新数据
        // this.getList();
      }
    },
    getTagList() {
      this.$axios
        .post("http://47.104.167.34:9110/api/tag/list", {
          params: {},
        })
        .then((r) => {
          console.log(r, "ok-list-tag");
          this.form = r.data.data;
        })
        .catch((r) => {
          console.log(r, "catch");
        });
    },
  },
  created() {
    this.getTagList();
  },
};
</script>

<style scoped>
.category {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: column;
}
.box-card {
  width: 100%;
}
.text {
  margin: 4px;
}
.el-button {
  height: 26px;
  line-height: 0px;
  padding-left: 10px;
}
>>> .el-card__body {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: flex-start;
}
</style>